<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>便利贴 APP</title>
    <!-- 引入 Font Awesome 图标库 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <!-- 引入 Marked 库用于解析 Markdown 文本 -->
    <script src="https://lib.baomitu.com/marked/2.1.1/marked.min.js"></script>
    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* 自定义一些额外的样式 */
        .note {
            width: 408px;
            box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            margin: 1rem;
        }

        .tools {
            background-color: #4849ac;
            display: flex;
            justify-content: flex-end;
            padding: 0.5rem;
        }

        .tools button {
            margin-left: 0.5rem;
            border: none;
            background-color: transparent;
            cursor: pointer;
            font-size: 1.2rem;
            color: white;
        }

        .tools button:hover {
            color: #f8f9fa;
            transform: scale(1.1);
        }

        .main {
            padding: 20px;
        }

        .hidden {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 添加便利贴的按钮 -->
    <button class="add bg-green-500 text-white font-bold py-2 px-4 rounded absolute top-4 right-4" id="add">
        <i class="fas fa-plus"></i> 添加便利贴
    </button>
    <script src="script.js"></script>
</body>

</html>    